<template>
	<view>
		<!-- 搜索框 -->
			<view class="header">
		<!-- 		<view class="search">
					<input type="text" placeholder="搜索你喜欢的营地" v-model="search" />
					<uni-icons type="mic" size="25"></uni-icons>
					<uni-icons type="search" size="25"></uni-icons>
				</view>
				<text class="icon" @click="scan">&#xe8b5;</text> -->
				<pickerAddress v-model="addressShow" @confirm="addresspick" />
				<view>
					<view class="example-body">
						<uni-nav-bar :fixed="false" color="#333333" background-color="#FFFFFF" right-icon="scan" @clickLeft="addressShow = true" @clickRight="scan">
							<block slot="left">
								<view class="city" @click="addressShow = true">
									<view><text class="uni-nav-bar-text">{{ city }}</text></view>
									<uni-icons type="arrowdown" color="#333333" size="22" />
								</view>
							</block>
							<view class="input-view">
								<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
								<input v-model="keyword" confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm('pages/camp_elasticsearch/camp_elasticsearch?keyword='+keyword)">
							</view>
						</uni-nav-bar>
					</view>
				</view>
			</view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" indicator-color="#999999" indicator-active-color="white" :indicator-dots="indicatorDots"
					 :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
						<swiper-item>
							<view class="swiper-item uni-bg-red" >
								<image src="http://www.joyrv.cn//Public/Uploads/shop/adv/05914623968191053.jpg"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">
								<image src="http://www.joyrv.cn//Public/Uploads/shop/adv/05914624258152573.jpg"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">
								<image src="http://www.joyrv.cn//Public/Uploads/shop/adv/05914624119428791.jpg"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		
		<!-- 主页菜单栏 -->
		<view class="menu">
			<view class="icon" @click="gouHom('pages/camp_index/camp_index?address='+city)">
				&#xe75e;
				<view class="icon_title">
					<text>营地住宿</text>
				</view>
			</view>
			<view class="icon">
				&#xe75c;
				<view class="icon_title" @click="gouHom('pages/activity/activity_index?address='+city)">
					<text>营地活动</text>
				</view>
			</view>
			<view class="icon" @click="gouFoodHom('pages/food/food')">
				&#xe76d;
				<view class="icon_title" >
					<text>营地美食</text>
				</view>
			</view>
			<view class="icon">
				&#xe764;
				<view class="icon_title">
					<text>旅游指南</text>
				</view>
			</view>
			<view class="icon" @click="gouHom('pages/liu/jishihome/jishihome')">
				&#xe769;
				<view class="icon_title" >
					<text>营地集市</text>
				</view>
			</view>
			<view class="icon">
				&#xe76c;
				<view class="icon_title">
					<text>房车生活</text>
				</view>
			</view>
			<view class="icon">
				&#xe76b;
				<view class="icon_title">
					<text>耍耍客</text>
				</view>
			</view>
			<view class="icon">
				&#xe76a;
				<view class="icon_title">
					<text>周边景点</text>
				</view>
			</view>
		</view>
		<!-- 热门营地 -->
		<view class="example-body hot_title">
			<uni-nav-bar right-icon="arrowright"  left-text="热门营地" right-text="更多"/>
		</view>
		<view>
			<view>
				<uni-list class="hotcamp">
					<uni-card v-for="(camp,index) in camps" :title="camp.campname" mode="style" :is-shadow="true" :thumbnail="url[index]"
					 extra="Dcloud 2019-05-20 12:32:19" :note="camp.introduce">
						<!-- {{camp.introduce}} -->
					</uni-card>
				</uni-list>
			</view>
		</view>
	</view>
	
</template>

<script>
	// 引入list组件
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	//导入字体图标
	import uniIcons from "@/indexcomponents/uni-icons/icons.js"
	import uniCard from '@/components/uni-card/uni-card.vue'
	import uniNavBar from '@/indexcomponents/uni-nav-bar/uni-nav-bar.vue'
	import uniSection from '@/indexcomponents/uni-section/uni-section.vue'
	//三级联动地址
	import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
	export default {
		components: {
			uniList,
			uniListItem,
			uniIcons,
			uniCard,
			uniNavBar,
			uniSection,
			pickerAddress
		},
		data() {
			return {
				keyword:'',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				camps: [],
				city: '重庆',
				url:[
					"http://www.joyrv.cn//Public/Uploads/shop/adv/05942081915060496.png",
					"http://www.joyrv.cn//Public/Uploads/shop/adv/05896461617626136.png",
					"http://www.joyrv.cn//Public/Uploads/yk/5ba48ec2ebee1.jpg",
					"http://www.joyrv.cn//Public/Uploads/yk/5bd2c7bc943ad.JPG"
				],
				addressShow: false,
				form: {
					province: '',
					city: '',
					area: '',
				},
				address: '',
				user:''
			}
		},
		onLoad() {
			uni.request({
			    url: this.webUrl+'camp/selectAll', 
			    success: (res) => {
					this.camps = res.data.list;
			    }
			});
			this.getUser();
		},
		
		//触底刷新
		onReachBottom(){
			console.log("触底了")
		},
		methods: {
			//获取缓存中的user
			getUser(){
				this.user = uni.getStorageSync("user");
			},
			//弹出三级地址菜单
			addresspick(obj) {
				let arr = [ 'province', 'city', 'area'];
				let place = '';
				let i =1;
				arr.map(key => {
					this.form[key] = obj[key].AreaId
					if(i==1){
						this.city = obj[key].AreaName;
						i=2;
					}
					place += obj[key].AreaName
				})
				this.address = place;
			},
			//页面加载的方法
			showCamp: function() {
				uni.request({
					url: this.webUrl+'camp/selectbyExample',
					success: (res) => {
						this.camps = res.data.list;
					}
				});
			},
			//扫码
			scan:function(){
				// 允许从相机和相册扫码
				var _this = this;
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						if(_this.user!=null){
							uni.request({
								url:res.result+'&userId='+_this.user.userId,
								success: (res) => {
									uni.showToast({
										title:res.data.message
									})
								}
							})
						}else{
							uni.showToast({
								title:'您还未登录'
							})
						}
						
				    }
				});

		 	},
		    onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			showMenu() {
				uni.showToast({
					title: '菜单'
				})
			},
			clickLeft() {
			
				uni.showToast({
					title: '左侧按钮'
				})
			},
			search() {
				uni.showToast({
					title: '搜索'
				})
			},
			showCity() {
			
				uni.showToast({
					title: '选择城市'
				})
			},
			// scan() {
			// 	uni.showToast({
			// 		title: '扫码'
			// 	})
			// },
			//elasticsearch
			confirm(path) {
				uni.navigateTo({
					url:"/"+path
				})
			},
			//跳转到各功能首页
			gouHom(path){
				uni.navigateTo({
					url:"/"+path
				})
			},
			gouFoodHom(path){
				uni.navigateTo({
					url:"/"+path
					})
				}
		}
	}
</script>

<style lang="scss">
	.swiper {
		width: 750rpx;
		height: 480rpx;

		image {
			width: 100%;
			height: 480rpx;
		}
	}
	.header{
		// position: fixed;
		// top: 80rpx;
		width: 750rpx;
		height: 100rpx;
		// .search {
		// 	height: 60rpx;
		// 	width: 550rpx;
		// 	position: fixed;
		// 	top: 140rpx;
		// 	left: 85rpx;
		// 	opacity: 0.55;
		// 	background-color: #EEE;
		// 	border-radius: 15rpx;
		// 	display: flex;
		// 	input {
		// 		height: 60rpx;
		// 		width: 480rpx;
		// 		color: black;
		// 	}
		// 	uni-icons {
		// 		margin-left: 30rpx;
		// 		color: #C0C0C0;
		// 	}
		// }
		// .icon{
		// 	font-size: 60rpx;
		// 	position: fixed;
		// 	top: 140rpx;
		// 	right: 30rpx;
		// }
	}
	.menu {
		background-color: #757776;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		color: #FFFFFF;
		text-align: center;
		margin-top: 10rpx;
		height: 300rpx;
		.icon {
			border: 1px solid #F1F1F1;
			font-size: 65rpx;
			width: 24%;
			text {
				font-size: 26rpx;
			}
			.icon_title {
				margin-top: 10rpx;
			}

		}
	},
	.hotcamp{
		background-color: #CCCCCC;
	},
	.hot_title{
		margin-top: 10px;
	}
	// 搜索框
	/* 头条小程序组件内不能引入字体 */
		/* #ifdef MP-TOUTIAO */
		@font-face {
			font-family: Uniicons;
			font-weight: normal;
			font-style: normal;
			src: url('~@/static/uni.ttf') format('truetype');
		}
	
		/* #endif */
	
		/* #ifndef APP-NVUE */
		page {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background-color: #efeff4;
			min-height: 100%;
			height: auto;
		}
	
		view {
			font-size: 14px;
			line-height: inherit;
		}
	
		.example {
			padding: 0 15px 15px;
		}
	
		.example-info {
			padding: 15px;
			color: #3b4144;
			background: #ffffff;
		}
	
		.example-body {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			padding: 0;
			font-size: 14px;
			background-color: #ffffff;
		}
	
		/* #endif */
		.example {
			padding: 0 15px;
		}
	
		.example-info {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			padding: 15px;
			color: #3b4144;
			background-color: #ffffff;
			font-size: 14px;
			line-height: 20px;
		}
	
		.example-info-text {
			font-size: 14px;
			line-height: 20px;
			color: #3b4144;
		}
	
	
		.example-body {
			flex-direction: column;
			padding: 15px;
			background-color: #ffffff;
		}
	
		.word-btn-white {
			font-size: 18px;
			color: #FFFFFF;
		}
	
		.word-btn {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			border-radius: 6px;
			height: 48px;
			margin: 15px;
			background-color: #007AFF;
		}
	
		.word-btn--hover {
			background-color: #4ca2ff;
		}
	
		.uni-nav-bar-text {
			font-size: 28rpx;
		}
	
		.city {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			/* width: 160rpx;
	*/
			margin-left: 4px;
		}
	
		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			/* width: 500rpx;
	*/
			flex: 1;
			background-color: #f8f8f8;
			height: 30px;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: 30px;
		}
	
		.input-uni-icon {
			line-height: 30px;
		}
	
		.nav-bar-input {
			height: 30px;
			line-height: 30px;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 28rpx;
			background-color: #f8f8f8;
		}
	
		.example-body {
			padding: 0;
		}
</style>
